<template>
  <div class="h-full w-full p-5">
    <div class="card-box h-full">
      <div class="writeoffRecord-list-container min-h-full">
        <!-- 页面标题和操作区 -->
        <div class="page-header">
          <h1 class="page-title">退款记录</h1>
        </div>

        <!-- 筛选区 -->
        <el-card class="filter-card">
          <div class="filter-group">
            <el-input
              v-model="searchOrderNo"
              placeholder="请输入订单号"
              clearable
              class="search-input"
              @keyup.enter="handleSearch"
              @clear="handleSearch"
            />
            <el-input
              v-model="searchRefundNo"
              placeholder="请输入退款单号"
              clearable
              class="search-input"
              @keyup.enter="handleSearch"
              @clear="handleSearch"
            />
            <el-button @click="handleSearch">
              <IconifyIcon icon="material-symbols:search" />
              搜索
            </el-button>
          </div>
        </el-card>

        <!-- 用户列表 -->
        <el-card class="table-card">
          <el-table
            :data="tableData"
            border
            stripe
            :loading="tableLoading"
            empty-text="暂无退款记录"
          >
            <!-- 表格列定义省略 -->
            <el-table-column
              prop="orderNo"
              label="订单号"
              align="center"
              width="200"
              fixed="left"
            />
            <el-table-column
              prop="refundOrderNo"
              label="退款单号"
              align="center"
              width="200"
              fixed="left"
            />
            <el-table-column prop="productName" label="产品" align="center" />
            <el-table-column
              prop="refundMoney"
              label="退款金额"
              width="100"
              align="center"
            />
            <el-table-column
              prop="timeRange"
              label="退款时间段"
              align="center"
              width="120"
            >
              <template #default="scope">
                {{
                  scope.row.startTime && scope.row.endTime
                    ? `${scope.row.startTime.split(' ')[1].substring(0, 5)}-${scope.row.endTime.split(' ')[1].substring(0, 5)}`
                    : ''
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="state"
              label="退款状态"
              align="center"
              width="100"
            >
              <template #default="scope">
                <el-tag :type="scope.row.state === 0 ? 'success' : 'danger'">
                  {{ scope.row.state === 0 ? '成功' : '失败' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="退款时间"
              align="center"
              width="200"
            />
            <el-table-column
              prop="appUserName"
              label="操作人"
              align="center"
              width="100"
            />
            <el-table-column
              prop="appUserName"
              label="操作人角色"
              align="center"
              width="200"
            >
              <template #default="scope">
                {{ scope.row.isAdminOperation ? '普通用户' : '管理员' }}
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="totalwriteoffRecord"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import {
  ElButton,
  ElCard,
  ElInput,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElMessage,
  ElTag,
} from 'element-plus';
import { IconifyIcon } from '@vben/icons';
import { getRefundRecordList } from '#/api/order';

// 状态管理
const searchOrderNo = ref('');
const searchRefundNo = ref('');
const tableLoading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const totalwriteoffRecord = ref(0);
const tableData = ref<any[]>([]);

// 监听pageSize变化，重置currentPage为1并重新加载数据
watch(pageSize, (newSize) => {
  currentPage.value = 1; // 页码重置为1
});

// 监听currentPage变化，重新加载数据
watch(currentPage, (newPage) => {
  loadwriteoffRecord();
});

// 搜索方法
const handleSearch = () => {
  currentPage.value = 1; // 搜索时重置页码
  loadwriteoffRecord();
};

// 加载退款记录数据
const loadwriteoffRecord = async () => {
  tableLoading.value = true;
  try {
    const {
      data: { list, total },
    } = await getRefundRecordList({
      orderNo: searchOrderNo.value,
      refundOrderNo: searchRefundNo.value,
      pageNum: currentPage.value, // 传递当前页码
      pageSize: pageSize.value, // 传递每页条数
    });
    totalwriteoffRecord.value = Number(total);
    tableData.value = list;
  } catch (error) {
    console.error('加载退款记录失败:', error);
    tableData.value = [];
    totalwriteoffRecord.value = 0;
    ElMessage.error('加载退款记录数据失败');
  } finally {
    tableLoading.value = false;
  }
};
// 页面加载时获取数据
loadwriteoffRecord();
</script>

<style scoped lang="scss">
.writeoffRecord-list-container {
  padding: 20px;
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .page-title {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
    }
  }
  .pagination-container {
    margin-top: 16px;
    text-align: right;
  }

  .filter-card {
    margin-bottom: 20px;
    .filter-group {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      .search-input {
        width: 200px;
      }
    }
  }
}
</style>
